<template>
	<sw-common-frame>
		<template slot="set">
			<sw-set-frame type="11"></sw-set-frame>
			<el-divider></el-divider>
		</template>
		<!-- <template slot="set">
			<h4>默认库配额</h4>
			<p>以下针对于库的配额设置，将适用于增量库的初始化中，对已进行初始化的库没有影响</p>
			<dl v-for="(item, index) in configListData" :key="index">
				<dt>{{ item.name }}：</dt>
				<dd>
					<el-input-number v-model="item.value" controls-position="right" :min="1" size="small" :disabled="!isEdit" placeholder="请输入内容"></el-input-number>
					<template v-if="!isEdit">
						<el-button type="text" size="small" @click="isEdit = true">编辑</el-button>
					</template>
					<template v-else>
						<el-button type="text" size="small" @click="handleSaveConfig(item)">保存</el-button>
						<el-button type="text" size="small" @click="isEdit = false">取消</el-button>
					</template>
				</dd>
			</dl>
			<el-divider></el-divider>
		</template> -->
		<template slot="tips">
			<h4>独立库配额</h4>
			<p>以下针对具体库进行配额设置</p>
		</template>
		<template slot="button">
			<h5>资源库</h5>
		</template>
		<template slot="query">
			<el-input size="small" placeholder="搜索资源库" v-model="queryData.name" style="width: 200px">
				<el-button slot="append" icon="el-icon-search"></el-button>
			</el-input>
		</template>
		<template slot="table">
			<el-table size="medium" :data="resLibraryData" stripe height="100%">
				<el-table-column label="库名称" prop="name" min-width="100"></el-table-column>
				<el-table-column label="创建人" prop="createName" width="150"></el-table-column>
				<el-table-column label="文件总量" prop="diskCount" width="120"></el-table-column>
				<el-table-column label="已使用空间/配额总量" min-width="200">
					<template slot-scope="{ row }">
						<el-progress :percentage="quotaPercentage(row)" :show-text="false"></el-progress>
						<p class="size">{{ row.diskUseQuota | sizeFilter }}/{{ row.diskQuota || '0' }}MB</p>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="60" align="center">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" icon="el-icon-setting" @click="handleConfigQuota(row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="getResourceLib"></sw-pagination>
		</template>
		<el-dialog title="库配额设置" :visible.sync="dialogVisible" width="480px" custom-class="form_dialog_wrapper">
			<el-form size="small" ref="form" class="disk_quota_info" :model="quotaData" :rules="quotaRules">
				<el-form-item label="库名称" label-width="85px">{{ quotaData.name }}</el-form-item>
				<el-form-item label="已使用空间/配额总量" label-width="175px">{{ quotaData.diskUseQuota | sizeFilter }}/{{ quotaData.diskQuota || '0' }}MB</el-form-item>
				<el-form-item label="配置容量(MB)" prop="diskQuota" label-width="131px">
					<el-input-number v-model="quotaData.diskQuota" controls-position="right"></el-input-number>
				</el-form-item>
			</el-form>
			<template slot="footer">
				<el-button size="medium" @click="dialogVisible = false">取消</el-button>
				<el-button size="medium" type="primary" @click="handleUpdateQuota">确定</el-button>
			</template>
		</el-dialog>
	</sw-common-frame>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { updateConfig } from '@/api/system/tbSysConfig';
import { getLibraryList, updateLibrary } from '@/api/data/tbNetDiskDir';
export default {
	data() {
		return {
			isEdit: false,
			configInfo: {},
			configListData: [],
			curConfigList: [{ field: 'filed7', formType: 2 }],
			queryData: { page: 1, limit: 15, libraryId: '-1', type: '1', name: '' },
			//表格
			dataCount: 0,
			resLibraryData: [],
			//弹窗
			dialogVisible: false,
			quotaData: {},
			quotaRules: {
				diskQuota: { required: true, message: '请输入配额', trigger: 'blur' }
			}
		};
	},
	computed: {
		...mapGetters(['siteConfig']),
		configData() {
			return this.siteConfig.find((item) => item.type === '2');
		}
	},
	mounted() {
		let nameArr = JSON.parse(this.configData.filed22);
		this.configListData = this.curConfigList.map((item) => {
			let info = nameArr.find((n) => n.field === item.field);
			return { ...item, name: info.name, value: this.configData[item.field] };
		});
		this.getResourceLib();
	},
	methods: {
		...mapActions(['getSiteConfig']),
		//格式化参数
		formatConfigParams(data) {
			let obj = { ...this.configInfo };
			obj[data.field] = data.value;
			return obj;
		},

		//保存配置
		async handleSaveConfig(data) {
			let params = this.formatConfigParams(data);
			let result = await updateConfig(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('保存网站配置成功');
				this.getSiteConfig();
				this.isEdit = false;
			} else {
				this.$message.error('保存网站配置失败');
			}
		},

		//获取资源库列表
		async getResourceLib() {
			let result = await getLibraryList(this.queryData).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.resLibraryData = !result.data ? [] : result.data;
			}
		},

		//格式化进度
		quotaPercentage(data) {
			let usedQuota = Number(data.diskUseQuota);
			let totalQuota = Number(data.diskQuota || 0) * 1024 * 1024;
			let percentage = Math.round((usedQuota / totalQuota) * 10000) / 100;
			return !percentage ? 0 : percentage;
		},

		//设置配额
		handleConfigQuota(data) {
			this.quotaData = { ...data };
			this.dialogVisible = true;
		},

		//更新资源库配额
		handleUpdateQuota() {
			this.$refs['form'].validate(async (valid) => {
				if (!valid) return false;
				let params = { ...this.quotaData };
				let result = await updateLibrary(params).then((res) => res.data);
				if (result.code === '0') {
					this.$message.success('修改资源库配额成功');
					this.dialogVisible = false;
					this.getResourceLib();
				}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.quota_setting_default {
	flex-shrink: 0;
	margin: 0 16px;
	padding: 16px 0;
	border-bottom: solid 1px #ddd;
	dl {
		display: flex;
		align-items: center;
	}
	dd {
		display: flex;
	}
	.el-input {
		margin-right: 10px;
	}
}
.quota_setting_tips {
	display: flex;
	flex-direction: column;
	margin: 0 16px;
	padding: 16px 0;
	overflow: hidden;
	line-height: 32px;
	p {
		color: #909399;
	}
}
.quota_setting_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	h4 {
		font-size: 16px;
		line-height: 1;
		margin-bottom: 16px;
	}
	p {
		font-size: 12px;
		line-height: 1;
		color: #909399;
		margin-bottom: 16px;
	}
	.default {
	}
	.isolated {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin: 0 16px;
		padding: 16px 0;
		overflow: hidden;
		p.size {
			margin: 10px 0 0;
		}
	}
	.headbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		margin-bottom: 16px;
		h5 {
			font-size: 14px;
		}
		.el-input-group__append {
			padding: 0 10px;
		}
	}
}
.disk_quota_info::v-deep {
	.el-form-item {
		margin-bottom: 16px;
	}
}
</style>
